<template>
  <div class="management-page">
    <div class="page-header">
      <h1>管理系统教练信息</h1>
      <p>管理健身房教练基本信息、专长和联系方式</p>
    </div>

    <div class="content-card">
      <div class="card-header">
        <h2>教练列表</h2>
        <div class="header-actions">
          <button class="btn-primary" @click="showAddDialog = true">
            <i class="fas fa-plus"></i>
            新增教练
          </button>
          <button class="btn-secondary" @click="refreshData">
            <i class="fas fa-sync-alt"></i>
            刷新
          </button>
        </div>
      </div>

      <div class="card-body">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 错误状态 -->
        <div v-if="error" class="error-container">
          <i class="fas fa-exclamation-circle"></i>
          <h3>数据加载失败</h3>
          <p>{{ error }}</p>
          <button @click="refreshData" class="btn-retry">重试</button>
        </div>

        <!-- 数据表格 -->
        <div v-if="!loading && !error && coaches.length > 0" class="table-container">
          <div class="table-responsive">
            <table class="data-table">
              <thead>
              <tr>
                <th>教练ID</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>专长</th>
                <th>教学年限</th>
                <th>入职时间</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="coach in coaches" :key="coach.id">
                <td><span class="id-badge">{{ coach.id }}</span></td>
                <td class="coach-name">
                  <div class="coach-info">
                    <img v-if="coach.name === '林子健'" :src="'/src/assets/images/林子健.jpg'" :alt="coach.name" class="coach-avatar">
                <img v-else-if="coach.imageUrl" :src="coach.imageUrl" :alt="coach.name" class="coach-avatar">
                <div v-else class="coach-avatar-placeholder">
                  <i class="fas fa-user"></i>
                </div>
                    <span>{{ coach.name }}</span>
                  </div>
                </td>
                <td class="phone">{{ coach.phone }}</td>
                <td class="specialty">{{ coach.specialty }}</td>
                <td class="experience">{{ coach.experience }}年</td>
                <td class="created-at">{{ formatDate(coach.createdAt) }}</td>
                <td>
                  <div class="action-buttons">
                    <button class="btn-action btn-edit" @click="editCoach(coach)">
                      <i class="fas fa-edit"></i>
                      编辑
                    </button>
                    <button class="btn-action btn-delete" @click="deleteCoach(coach.id)">
                      <i class="fas fa-trash"></i>
                      删除
                    </button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && !error && coaches.length === 0" class="empty-container">
          <div class="empty-icon">
            <i class="fas fa-user-slash"></i>
          </div>
          <h3>暂无教练数据</h3>
          <p>您还没有添加任何教练，点击上方按钮新增教练</p>
        </div>
      </div>
    </div>

    <!-- 添加/编辑对话框 -->
    <div v-if="showAddDialog" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ editingCoach ? '编辑教练信息' : '新增教练' }}</h3>
          <button class="modal-close" @click="closeModal" aria-label="关闭">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="saveCoach">
            <div class="form-group">
              <label for="name">教练姓名</label>
              <input
                  id="name"
                  v-model="form.name"
                  type="text"
                  placeholder="请输入教练姓名"
                  required
                  class="form-input"
              >
            </div>
            <div class="form-group">
              <label for="phone">手机号</label>
              <input
                  id="phone"
                  v-model="form.phone"
                  type="tel"
                  placeholder="请输入手机号"
                  required
                  class="form-input"
                  pattern="[0-9]{11}"
              >
            </div>
            <div class="form-group">
              <label for="specialty">专长领域</label>
              <input
                  id="specialty"
                  v-model="form.specialty"
                  type="text"
                  placeholder="请输入专长领域"
                  required
                  class="form-input"
              >
            </div>
            <div class="form-group">
              <label for="experience">教学年限</label>
              <input
                  id="experience"
                  v-model="form.experience"
                  type="number"
                  min="0"
                  max="50"
                  placeholder="请输入教学年限"
                  required
                  class="form-input"
              >
            </div>
            <div class="form-group">
              <label for="imageUrl">头像URL</label>
              <input
                  id="imageUrl"
                  v-model="form.imageUrl"
                  type="url"
                  placeholder="请输入头像图片URL"
                  class="form-input"
              >
            </div>
            <div class="form-actions">
              <button type="button" class="btn-cancel" @click="closeModal">取消</button>
              <button type="submit" class="btn-save">{{ editingCoach ? '更新' : '创建' }}</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue'

export default {
  name: 'CoachManagement',
  setup() {
    const coaches = ref([])
    const loading = ref(false)
    const error = ref('')
    const showAddDialog = ref(false)
    const editingCoach = ref(null)

    const form = reactive({
      name: '',
      phone: '',
      specialty: '',
      experience: '',
      imageUrl: ''
    })

    // 获取教练列表
    const fetchCoaches = async () => {
      loading.value = true
      error.value = ''
      try {
        const response = await fetch('/api/coaches/all')
        if (!response.ok) {
          throw new Error('获取数据失败')
        }
        const result = await response.json()
        if (result.code === 200) {
          coaches.value = result.data
        } else {
          throw new Error(result.message || '获取数据失败')
        }
      } catch (err) {
        error.value = err.message
      } finally {
        loading.value = false
      }
    }

    // 刷新数据
    const refreshData = () => {
      fetchCoaches()
    }

    // 编辑教练
    const editCoach = (coach) => {
      editingCoach.value = coach
      form.name = coach.name
      form.phone = coach.phone
      form.specialty = coach.specialty
      form.experience = coach.experience
      form.imageUrl = coach.imageUrl || ''
      showAddDialog.value = true
    }

    // 删除教练
    const deleteCoach = async (coachId) => {
      if (!confirm('确定要删除这个教练吗？此操作不可撤销。')) {
        return
      }

      try {
        const response = await fetch(`/api/coaches/${coachId}`, {
          method: 'DELETE'
        })

        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            await refreshData()
          } else {
            throw new Error(result.message)
          }
        } else {
          throw new Error('删除失败')
        }
      } catch (err) {
        alert(err.message)
      }
    }

    // 保存教练
    const saveCoach = async () => {
      try {
        const url = editingCoach.value
            ? '/api/coaches/update'
            : '/api/coaches/insert'

        const method = editingCoach.value ? 'PUT' : 'POST'
        const body = editingCoach.value
            ? { ...form, id: editingCoach.value.id }
            : form

        const response = await fetch(url, {
          method: method,
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(body)
        })

        if (response.ok) {
          const result = await response.json()
          if (result.code === 200) {
            closeModal()
            await refreshData()
          } else {
            throw new Error(result.message)
          }
        } else {
          throw new Error('保存失败')
        }
      } catch (err) {
        alert(err.message)
      }
    }

    // 格式化日期
    const formatDate = (dateString) => {
      if (!dateString) return '-'
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN')
    }

    // 关闭模态框
    const closeModal = () => {
      showAddDialog.value = false
      editingCoach.value = null
      form.name = ''
      form.phone = ''
      form.specialty = ''
      form.experience = ''
      form.imageUrl = ''
    }

    onMounted(() => {
      fetchCoaches()
    })

    return {
      coaches,
      loading,
      error,
      showAddDialog,
      editingCoach,
      form,
      refreshData,
      editCoach,
      deleteCoach,
      saveCoach,
      formatDate,
      closeModal
    }
  }
}
</script>

<style scoped>
.management-page {
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a1f35 0%, #0f172a 100%);
  color: #e2e8f0;
}

.page-header {
  margin-bottom: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-header h1 {
  color: #f8fafc;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

.page-header p {
  color: #94a3b8;
  font-size: 1.125rem;
  margin: 0;
}

.content-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 41, 59, 0.5);
}

.card-header h2 {
  color: #f1f5f9;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 1rem;
}

.btn-primary, .btn-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.card-body {
  padding: 2rem;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  color: #94a3b8;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(59, 130, 246, 0.2);
  border-left: 4px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-container p {
  margin: 0;
  font-size: 1.125rem;
}

/* 错误状态 */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #f87171;
  background: rgba(248, 113, 113, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(248, 113, 113, 0.2);
}

.error-container i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.error-container h3 {
  color: #fca5a5;
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.error-container p {
  margin: 0 0 1.5rem 0;
  color: #fecaca;
  max-width: 400px;
}

.btn-retry {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-retry:hover {
  background: rgba(248, 113, 113, 0.25);
  color: white;
}

/* 表格样式 */
.table-container {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(30, 41, 59, 0.5);
}

.data-table th {
  background: rgba(15, 23, 42, 0.8);
  color: #e2e8f0;
  font-weight: 600;
  text-align: left;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.data-table td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cbd5e0;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover {
  background: rgba(59, 130, 246, 0.05);
}

.id-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #818cf8;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: monospace;
}

.coach-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.coach-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.coach-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

.coach-name {
  font-weight: 600;
  color: #f1f5f9;
}

.phone {
  font-family: monospace;
  color: #cbd5e0;
}

.specialty {
  color: #e2e8f0;
  max-width: 200px;
}

.experience {
  font-weight: 700;
  color: #f59e0b;
}

.created-at {
  color: #94a3b8;
  font-size: 0.875rem;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
}

.btn-action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  white-space: nowrap;
}

.btn-edit {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.btn-edit:hover {
  background: rgba(59, 130, 246, 0.2);
  transform: translateY(-1px);
}

.btn-delete {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-delete:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-1px);
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-icon {
  font-size: 4rem;
  color: #475569;
  margin-bottom: 1.5rem;
  opacity: 0.7;
}

.empty-container h3 {
  color: #e2e8f0;
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.empty-container p {
  color: #94a3b8;
  margin: 0 0 2rem 0;
  max-width: 400px;
  line-height: 1.6;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.modal-content {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 41, 59, 0.8);
}

.modal-header h3 {
  margin: 0;
  color: #f8fafc;
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #cbd5e0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.modal-body {
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #e2e8f0;
  font-weight: 600;
  font-size: 0.875rem;
}

.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f8fafc;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: #64748b;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.btn-cancel, .btn-save {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.875rem;
}

.btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

.btn-save {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-save:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header h1 {
    font-size: 1.75rem;
  }

  .page-header p {
    font-size: 1rem;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
  }

  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .card-body {
    padding: 1.5rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.875rem 1rem;
  }

  .action-buttons {
    flex-direction: column;
    gap: 0.375rem;
  }

  .btn-action {
    width: 100%;
    justify-content: center;
  }

  .modal-content {
    margin: 1rem;
    width: calc(100% - 2rem);
  }

  .modal-header,
  .modal-body {
    padding: 1.25rem;
  }

  .form-actions {
    flex-direction: column;
  }

  .btn-cancel,
  .btn-save {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .data-table {
    font-size: 0.875rem;
  }

  .data-table th,
  .data-table td {
    padding: 0.75rem 0.5rem;
  }

  .id-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }

  .btn-action {
    font-size: 0.75rem;
    padding: 0.375rem 0.5rem;
  }

  .coach-info {
    gap: 0.5rem;
  }

  .coach-avatar,
  .coach-avatar-placeholder {
    width: 32px;
    height: 32px;
  }
}
</style>